import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import moment from 'moment';
import { Link } from 'react-router'

import { Row, Col, Card, Popconfirm, message, Icon } from 'antd';


import examActions from '../action'
import appActions from '../../app/action'

import '../styles.less'

export class Exam extends Component {

  state = {
    index : null,
    formType : 'add',
    formValues : null,
    formVisible : false
  }

  constructor (props) {
    super(props);
  }

  componentDidMount () {
    this.getExamList();
  }

  /**
   * 获取考试列表
   */
  getExamList () {
    const { appActions, examActions } =  this.props;
    appActions.loading(true).then(()=>{
      return examActions.getExamList()
    }).then(()=>{
      appActions.loading(false);
    }).catch(err=>{
      message.error(err.msg);
    })
  }

  /**
   * 添加一场考试
   */
  handleExamAdd () {
    this.props.examActions.postAddExam({
      status : 'setting',
      exam_id : (new Date()).getTime()
    }).then(doc=>{
      this.props.router.push({
        pathname: '/examdetail/'+doc.info.$loki
      });
    })
  }

  /**
   * 操作删除分类
   * @param $loki
   */
  handleExamDelete (formdata,index) {
    this.props.examActions.postDeleteExam({
      index,
      $loki : formdata.$loki,
    }).then(data=>{
      message.success('删除成功');
    }).catch(err=>{
      message.error(err);
    })
  }
  
  renderList (data) {

    const dateFormat = 'YYYY-MM-DD';
    const statusObj = {
      finish : '配置完成',
      setting : '配置中',
      end : '考试完成',
      exam : '考试中'
    };

    return (
      <Row type="flex">
        {
          data.map((value,index)=>{
            return (
              <Col key={value.$loki} ref={'card_'+value.$loki} className="ant-layout-card">
                <Card title={"考试名称:" + value.exam_name } className="ant-exam-card">
                  <p className="ant-exam-item">
                    考试时间：
                    {value.exam_start_date && moment(value.exam_start_date,dateFormat).format('YYYY-MM-DD')} 至 {value.exam_end_date && moment(value.exam_end_date,dateFormat).format('YYYY-MM-DD')}
                  </p>
                  <p className="ant-exam-item">
                    考试状态：
                    {value.status ? statusObj[value.status] : '配置中'}
                  </p>

                  <p className="ant-exam-item">
                    操作：

                    {
                      value.status !== 'setting' &&
                      <Link to={ "/examview/"+value.$loki }>查看</Link>
                    }

                    {
                      value.status == 'finish' &&
                      <span className="ant-exam-line">/</span>
                    }

                    {
                      (value.status == 'finish' || value.status == 'setting') &&
                      <Link to={ "/examdetail/"+value.$loki }>编辑</Link>
                    }

                  </p>

                  {
                    (value.status == 'setting' || value.status == 'finish') && <Popconfirm title="确定删除本场考试么?" onConfirm={()=>{ this.handleExamDelete(value,index)}} >
                      <Icon type="close-circle-o" className="card-handle-close" />
                    </Popconfirm>
                  }

                </Card>
                
              </Col>
            )
          })
        }

        <Col className="ant-layout-card">
          <Card className="ant-card-plus" onClick={this.handleExamAdd.bind(this)}>
            <Icon type="plus" />
          </Card>
        </Col>
      </Row>
    )
  }

  render() {
    const {exam} = this.props;
    const list = exam.get('examlist') && exam.get('examlist').toArray();
    return (
      <div>
        {list && this.renderList(list)}
      </div>
    )
  }

}

export default connect((state)=>{
  return  {
    exam : state.get('exam')
  }
},dispatch => {
  return {
    examActions : bindActionCreators(examActions, dispatch),
    appActions : bindActionCreators(appActions, dispatch)
  }
})(Exam);
